<template>
  <el-dialog title="平台模块权限配置" :close-on-click-modal="false" :close-on-press-escape="false"
    :visible.sync="visible" lock-scroll class="wpwork-dialog wpwork-dialog_center" width="700px">
    <h1>调度员：张三</h1>

    <el-transfer filterable :filter-method="filterMethod" :titles="['全部模块','已选模块']"
      filter-placeholder="请输入功能拼音" v-model="value" :data="data" :render-content="renderFunc">
    </el-transfer>

    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">{{ $t('common.cancelButton') }}</el-button>
      <el-button type="primary" :loading="btnLoading" @click="dataFormSubmit()">
        {{ $t('common.confirmButton') }}
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
import iconBox from "@/components/wpwork-iconBox";
import { create, update, info } from "@/api/system/system";
import singleImg from "@/components/Upload/SingleImg";
import clipboard from "@/utils/clipboard";

export default {
  components: { iconBox, singleImg },
  data() {
    return {
      data: [
        { label: '切换用户', key: 0 },
        { label: '修改密码', key: 1 },
        { label: '本地设置', key: 2 },
        { label: '天气预报', key: 3 },
        { label: '退出系统', key: 4 },
        { label: '当前时间', key: 5 },
        { label: '协同任务', key: 6 }
      ],
      value: [],
      filterMethod(query, item) {
        return item.label.indexOf(query) > -1;
      },
      categoryList: [
        { id: 1, fullName: "自助标点" },
        { id: 2, fullName: "考勤点" },
        { id: 3, fullName: "设备" },
        { id: 4, fullName: "设施" },
        { id: 5, fullName: "围栏" },
        { id: 6, fullName: "网格" }
      ],
      visible: false,
      dataForm: {
        id: "",
        name: "",
        category: "",
        coordinates: "",
        mapshow: 0,
        remarks: "",
        locationdesc: "",
        nfc: "",
        wifi: "",
        picurl1: "",
        picurl2: "",
        picurl3: "",
        dataReview: "",
        value1: "",
        value2: "",
      },
      dataRule: {
        category: [{ required: true, message: "类别不能为空", trigger: "blur" }],
      },
      formLoading: false,
      iconBoxVisible: false,
      btnLoading: false,
      selfUrl: ""
    };
  },
  methods: {

    clearCoordinates() {
      this.dataForm.coordinates = ""
    },
    openMap() {
    },
    openWindow() {
      this.coordinatesVisible = true;
      console.log("🚀 ~ :145 ~ openWindow ~ this.coordinatesVisible:", this.coordinatesVisible)
    },
    init(id) {
      console.log("🚀 ~ :107 ~ init ~ id:", id)
      console.log("🚀 ~ :140 ~ dataFormSubmit ~ this.dataForm:", this.dataForm)
      this.dataForm.id = id || "";
      this.selfUrl = "";
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          // this.formLoading = true;
          // request({
          //   url: `/api/example/WorkResources/getOne`,
          //   method: "post",
          //   id: this.dataForm.id
          // }).then((res) => {
          //   console.log("🚀 ~ :168 ~ init ~ res:", res)
          //   this.$nextTick(() => {
          //     this.formLoading = false;
          //   });
          // })



        } else {
        }
      });
    },
    openIconBox() {
      this.iconBoxVisible = true;
    },
    dataFormSubmit() {
      console.log("🚀 ~ :140 ~ dataFormSubmit ~ this.dataForm:", this.dataForm)
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          const query = {
            ...this.dataForm,
            propertyJson: JSON.stringify(this.dataForm.propertyJson)
          };
          const formMethod = this.dataForm.id ? update : create;
          formMethod(query).then(res => {
            this.$message({
              message: res.msg,
              type: "success",
              duration: 1500,
              onClose: () => {
                this.visible = false;
                this.btnLoading = false;
                this.$emit("refreshDataList");
              }
            });
          }).catch(() => {
            this.btnLoading = false;
          });
        }
      });
    },
    choiceIcon(value) {
      this.dataForm.icon = value;
    },
    getSelfUrl(enCode) {
      if (!enCode) return (this.selfUrl = "");
      this.selfUrl = `${window.location.origin}/wpwork_APP_${enCode}`;
    },
    handleCopy(text, event) {
      if (text) clipboard(text, event);
    },
  }
};
</script>
<style lang="scss" scoped>
.img-list {
  display: flex;
  >>> .singleImg-container {
    margin-right: 20px;
    :last-child {
      margin-right: 0;
    }
  }
}
.icon-link {
  color: #409eff;
  margin-left: 10px;
}
.collapse {
  ::v-deep .el-collapse-item__header {
    font-size: 1rem;
    font-weight: 600;
  }
}
.leftWhite {
  ::v-deep .el-form-item__label {
    width: 250px !important;
  }
}
.leftWhite2 {
  ::v-deep .el-form-item__label {
    width: 150px !important;
  }
  ::v-deep .el-form-item__content {
    margin-left: 140px !important;
  }
}
</style>